<style scoped>
@import "@/assets/table.css";
</style>
<template>
  <el-table
      :data="tableData"
      class="tableWH"
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#eee',color:'#606266'}"
      @sort-change="sortChange"
  >
    <el-table-column
        type="selection"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="预警编号"
        prop="id"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        {{scope.$index+1+pageSize*(currentPage-1)}}
      </template>
    </el-table-column>

    <el-table-column
        label="商品名称"
        prop="name"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="预警数量"
        prop="number"
        header-align="center"
        align="center"
    />

    <el-table-column
        label="预警备注"
        prop="remark"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="time"
        label="创建时间"
        sortable
        header-align="center"
        align="center"
    />

    <el-table-column
        label="操作"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        <el-button
            size="small"
            @click="handleEdit(scope.row)"
        >
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div
      class="pagination"
  >
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
        v-model:current-page="currentPage"
    />
  </div>
  <el-dialog
      v-model="dialogFormVisibleUpdate"
      width="500"
      title="预警编辑"
  >
    <el-form
        :model="dialogFormData"
        label-width="auto"
    >
      <el-form-item label="预警编号:">
        <el-input
            v-model="dialogFormData.id"
            disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="商品名称:">
        <el-input
            v-model="dialogFormData.name"
            disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="预警数量:">
        <el-input
            v-model="dialogFormData.number"
        />
      </el-form-item>
      <el-form-item label="预警备注:">
        <el-input
            v-model="dialogFormData.remark"
        />
      </el-form-item>
      <el-form-item label="时间:">
        <el-input
            v-model="dialogFormData.time"
            disabled="disabled"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleUpdate = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="updateGoodsWarning"
        >
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogFormVisibleDelete"
      title="预警删除"
      width="500"
  >
    <span>确定删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleDelete = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="deleteGoodsWarning"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElTable, ElMessage} from 'element-plus'
import {
  deleteGoodsWarningAPI,
  updateGoodsWarningAPI,
  getGoodsWarningAPI
} from "@/axios/api";

const multipleSelection = ref([])//全选
const tableData = ref([])//存放请求数据
const pageSize = ref(10)//页数
const currentPage = ref(1)//页码
const total = ref(0)//总条数
const sort = ref(0)//正逆顺序
const dialogFormVisibleUpdate = ref(false)//编辑
const dialogFormVisibleDelete = ref(false)//删除
const dialogFormData = ref<use>()//编辑操作中间值
const handleDeleteIndex = ref(0)//删除操作中间值

interface use {
  g_id: number
  id: number
  name: string
  number: number
  remark: string
  time: string
}

function getGoodsWarning() {
  getGoodsWarningAPI({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    sort: sort.value
  }).then(data => {
    console.log(data)
    tableData.value = data.data.data.warnList
    total.value = data.data.data.total
  })
}

function handleSelectionChange(val) {
  multipleSelection.value = val
}

function handleEdit(row) {
  dialogFormData.value = JSON.parse(JSON.stringify(row))
  dialogFormVisibleUpdate.value = true
}

function handleDelete(row) {
  handleDeleteIndex.value = row.id
  dialogFormVisibleDelete.value = true
}

function deleteGoodsWarning() {
  if (multipleSelection.value.length == 0) {
    deleteGoodsWarningAPI({
      ids: handleDeleteIndex.value
    }).then(data => {
      ElMessage.success(data.data.data)
      getGoodsWarning()
    })
  } else {
    for (let i = 0; i < multipleSelection.value.length; i++) {
      deleteGoodsWarningAPI({
        ids: multipleSelection.value[i].id
      }).then(data => {
        getGoodsWarning()
        if (i == multipleSelection.value.length - 1) {
          ElMessage.success(data.data.data)
        }
      })
    }
  }
  dialogFormVisibleDelete.value = false
}

function currentChange() {//分页
  getGoodsWarning()
}

function updateGoodsWarning() {
  dialogFormVisibleUpdate.value = false
  updateGoodsWarningAPI({
    id: dialogFormData.value.id,
    number: dialogFormData.value.number,
    remark: dialogFormData.value.remark
  }).then(data => {
    ElMessage.success(data.data.data)
    getGoodsWarning()
  })
}
function sortChange(val){
  if (val.order == "ascending" || val.order == null) {
    sort.value = 0
  } else if (val.order == "descending") {
    sort.value = 1
  }
  getGoodsWarning()
}
onMounted(() => {
  getGoodsWarning()
})
</script>
